﻿<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Microsoft.DevDiv.Wpf.Samples"
    xmlns:dme="clr-namespace:Microsoft.DevDiv.Wpf.Samples;assembly=DeferredMarkupExtension">
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="GraphicAssets.xaml" />
  </ResourceDictionary.MergedDictionaries>
  
  <Style TargetType="{x:Type GroupBox}">
    <Setter Property="BorderThickness" Value="3" />
    <Setter Property="Margin" Value="5" />
    <Setter Property="Padding" Value="3" />
  </Style>

  <!-- Data Template for Image Url's using WPF's Uri to ImageSource converter -->
  <DataTemplate x:Key="{x:Static local:Page1.SyncImageUrlTemplateKey}">
    <Image Source="{Binding}" />
  </DataTemplate>

  <!-- Data Template for Image Url's using AsyncImageSource markup extension -->
  <DataTemplate x:Key="{x:Static local:Page1.AsyncImageUrlTemplateKey}">
    <FrameworkTemplate.Resources>
      <DrawingImage x:Key="errorImage">
        <DrawingImage.Drawing>
          <GeometryDrawing Brush="Red">
            <GeometryDrawing.Geometry>
              <EllipseGeometry RadiusX="10" RadiusY="10" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
        </DrawingImage.Drawing>
      </DrawingImage>

      <!-- Storyboard to control busy image animation-->
      <Storyboard x:Key="rotateDrawing360">
        <DoubleAnimation
          Storyboard.TargetProperty="(DrawingImage.Drawing).(DrawingGroup.Transform).(RotateTransform.Angle)"
          Storyboard.TargetName="busyImage"
          From="0"
          To="360"
          Duration="00:00:3.00"
          RepeatBehavior="Forever" />
      </Storyboard>
    </FrameworkTemplate.Resources>

    <!-- Trigger busy image animation -->
    <DataTemplate.Triggers>
      <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard x:Name="rotateDrawing360" Storyboard="{StaticResource rotateDrawing360}" />
      </EventTrigger>
      <EventTrigger RoutedEvent="FrameworkElement.Unloaded">
        <StopStoryboard BeginStoryboardName="rotateDrawing360" />
      </EventTrigger>
    </DataTemplate.Triggers>

    <!-- 
      Normaly the visual tree would just be
      <Image Source="{dme:AsyncImageSource BusyImage=x, ErrorImage=y}" />
      But because we need to name and animate BusyImage, we use the expanded property syntax
      -->    
    <Image>      
      <Image.Source>
        <dme:AsyncImageSource ErrorSource="{StaticResource errorImage}">
          <dme:AsyncImageSource.BusySource>
            <DrawingImage x:Name="busyImage" Drawing="{StaticResource indeterminateProgressDrawing}" />
          </dme:AsyncImageSource.BusySource>
        </dme:AsyncImageSource>
      </Image.Source>
    </Image>
  </DataTemplate>
</ResourceDictionary>